<template>
  <div :style="{display:block?'none':'block'}">
    <el-row>
      <el-form :inline="true" :model="courseQueryForm" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input v-model="courseQueryForm.name" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="教学班名称">
          <el-select v-model="courseQueryForm.clazzId" placeholder="请选择">
            <el-option
              v-for="item in classOption"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>  
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListCourseByBar(courseQueryForm)">查询</el-button>
          <el-button @click="resetCourseQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="courseName" label="名称"/>
        <el-table-column prop="activityName" label="活动"/>
        <el-table-column prop="className" label="班级"/>
        <el-table-column prop="teacherName" label="教师"/>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '0'">已创建</el-tag>
            <el-tag type="success" v-else-if="scope.row.status == '1'">已开放</el-tag>
            <el-tag type="warning" v-else-if="scope.row.status == '2'">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button @click="handleChangeClass(scope.row)" type="text">更改教学班</el-button>
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
            <el-button @click="handleOpen(scope.row)" v-if="scope.row.status == '0'" type="text">开放</el-button>
            <el-button @click="handleClose(scope.row)" v-if="scope.row.status == '1'" type="text">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>
    </el-row>

    <!-- 修改课程弹窗 -->
    <el-dialog :visible.sync="editDialogVisible" width="400px" title="修改课程" @closed="cancelEditDialog">
      <el-form :model="courseForm" label-position="left" label-width="80px">
          <el-form-item label="名称" prop="courseName">
              <el-input v-model="courseForm.courseName"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button @click="cancelEditDialog">取消</el-button>
              <el-button type="primary" @click="confirmSubmitEdit(courseForm)">确定</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
    
    
    <!-- 修改教学班弹窗 -->
    <el-dialog :visible.sync="changeClassDialogVisible" width="400px" title="更改教学班" @closed="cancelClassDialog">
      <el-form :model="changeForm" label-position="left" label-width="80px">
          <el-form-item label="教学班">
            <el-select v-model="changeForm.clazzId" placeholder="请选择">
              <el-option
                v-for="item in classOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>  
          </el-form-item>
          <el-form-item>
              <el-button @click="cancelClassDialog">取消</el-button>
              <el-button type="primary" @click="confirmSubmitChangeClass(changeForm)">确定</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listClass } from '@/api/class';
import { changeClass, closeCourse, editCourse, listCourse, openCourse, removeCourse } from '@/api/course';
import { getTeacherId } from '@/api/teacher';
import { Message, MessageBox } from 'element-ui';
export default {
  data(){
    return{
      mode :'add',
      block: false,
      currentPage:undefined,
      total:undefined,
      courseDialogVisible: false,
      editDialogVisible: false,
      changeClassDialogVisible: false,
      queryForm:{
        name:'',
        pageNum:1,
        pageSize:5
      },
      courseQueryForm:{
        name:'',
        clazzId:'',
        pageNum:1,
        pageSize:5
      },
      changeForm:{},
      courseForm:{},
      tableData:[{
        activityName:'',
        className:'',
        courseName:'课程1',
        teacherName:'',
        status:1,
      }],
      classOption:[]
    }
  },
  methods:{
    getListCourseByBar(data){
      listCourse(data).then(res1=>{
        this.tableData = res1.row
      }).catch(()=>{})
    },
    getListCourse(){

      let id = this.$store.state.user.id || JSON.parse(localStorage.getItem('user')).id
        
        getTeacherId(id).then(res=>{
            this.teacherId = res.data
            this.queryForm.teacherId = res.data
            listClass(this.queryForm).then(res=>{
              this.classOption = res.row
              
              if(!this.classOption.length){
                this.block = true
                MessageBox.alert(`当前教师账号未分配教学班，请联系活动管理员`).then(()=>{}).catch(()=>{})
              }else{
                this.courseQueryForm.clazzId = this.classOption[0].id
                listCourse(this.courseQueryForm).then(res1=>{
                  this.tableData = res1.row
                }).catch(()=>{})
              }
            }).catch(()=>{})
        })
    },
    resetCourseQuery(){
      this.courseQueryForm = {
        name:'',
        clazzId:this.classOption[0].id,
        pageNum:1,
        pageSize:5
      }
      this.getListCourse()
    },
    openAddCourseDialog(){
      this.courseDialogVisible = true
    },
    cancelDialog(){
      this.courseDialogVisible = false
      this.courseForm = {}
    },
    handleClick(){},
    handleDel(data){
      MessageBox.alert(`确定要删除课程<${data.courseName}>吗?`).then(()=>{
        removeCourse(data.id).then(res=>{
          Message.success(res.msg)
          listCourse(this.courseQueryForm).then(res1=>{
            this.tableData = res1.row
          }).catch(()=>{})
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleEdit(data){
      this.editDialogVisible = true
      this.courseForm = JSON.parse(JSON.stringify(data))
    },
    cancelEditDialog(){
      this.editDialogVisible = false
      this.courseForm = {}
    },
    cancelClassDialog(){
      this.changeClassDialogVisible = false
      this.changeForm = {}
    },
    confirmSubmitEdit(data){
      editCourse(data).then(res=>{
        Message.success(res.msg)
        this.editDialogVisible = false
        this.courseForm = {}
        listCourse(this.courseQueryForm).then(res1=>{
          this.tableData = res1.row
        }).catch(()=>{})
      }).catch(()=>{})
    },
    confirmSubmitChangeClass(data){
      changeClass(data).then(res=>{
        Message.success(res.msg)
        listCourse(this.courseQueryForm).then(res1=>{
          this.tableData = res1.row
        }).catch(()=>{})
        this.changeClassDialogVisible = false
      }).catch(()=>{})
    },
    handleOpen(data){
      MessageBox.alert(`确定要开放课程<${data.courseName}>吗?`).then(()=>{
        openCourse(data.id).then(res=>{
          Message.success(res.msg)
          listCourse(this.courseQueryForm).then(res1=>{
            this.tableData = res1.row
          }).catch(()=>{})
        })
      }).catch(()=>{})
    },
    handleClose(data){
      MessageBox.alert(`确定要关闭课程<${data.courseName}>吗?`).then(()=>{
        closeCourse(data.id).then(res=>{
          Message.success(res.msg)
          listCourse(this.courseQueryForm).then(res1=>{
            this.tableData = res1.row
          }).catch(()=>{})
        }).catch(()=>{})
      }).catch(()=>{})
    },
    handleChangeClass(data){
      this.changeClassDialogVisible = true
      this.changeForm.courseId = data.id
      // this.changeForm.clazzId = JSON.parse(JSON.stringify(data)).classId
    },

    handleSizeChange(size){
      this.queryForm.pageSize=size
      this.getListCourse(this.queryForm)
    },
    handleCurrentChange(page){
      this.queryForm.pageNum=page
      this.getListCourse(this.queryForm)
    },
  },
  created(){
    this.getListCourse()
  }
}
</script>

<style>

</style>